<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SWiper全屏轮播-</title>
        <link type="text/css" rel="stylesheet" href="css/lunbo_style.css">
    </head>
    <body>
        <section class="pc-banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-slide-center none-effect">
                        <a href="#">
                            <img src="img/banner001.jpg">
                        </a>
                        <div class="layer-mask"></div>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="img/banner002.jpg">
                        </a>
                        <div class="layer-mask"></div>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="img/banner003.jpg">
                        </a>
                        <div class="layer-mask"></div>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="img/banner004.jpg">
                        </a>
                        <div class="layer-mask"></div>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="img/banner005.jpg">
                        </a>
                        <div class="layer-mask"></div>
                    </div>
                </div>
                <div class="button">
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </section>
        <script type="text/javascript" src="js/lunbo_swiper.min.js"></script>
        <script type="text/javascript">

            window.onload = function() {
                var swiper = new Swiper('.swiper-container',{
                    autoplay: false,
                    speed: 1000,
                    autoplayDisableOnInteraction: false,
                    loop: true,
                    centeredSlides: true,
                    slidesPerView: 4,
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    prevButton: '.swiper-button-prev',
                    nextButton: '.swiper-button-next',
                    onInit: function(swiper) {
                        swiper.slides[4].className = "swiper-slide swiper-slide-active";
                    },
                    breakpoints: {
                        880: {
                            slidesPerView: 4,
                        }
                    }
                });
            }
        
        
        </script>
    </body>
</html>
